<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>背景设置</title>
		<style>

			* {
				padding: 0;
				margin: 0;
			}

			.top {
				padding: 100px;
				width: 600px;
				height: 600px;
				border: 20px dotted black;
				margin: 50px auto 0;
				background-image: url("dog.jpg");
				background-repeat: no-repeat;
				/* 背景图的尺寸 */
				background-size: 200px auto;
				
				/*
					背景区域
					border-box: 背景图片可以填充到border中;
					padding-box: 背景图片可以填充到padding中;
					content-box: 背景图片可以填充到content中;
				*/
				/*background-origin: content-box; */

				/* 
					背景裁切 
					border-box: 保留padding, border, content里面的图片;
					padding-box: 保留padding, content中的图片;
					content-box: 保留content中的图片;
				*/
				/*background-clip: padding-box;*/

				background: url("dog.jpg") no-repeat left top,
							url("dog.jpg") no-repeat right top,
							url("dog.jpg") no-repeat left bottom,
							url("dog.jpg") no-repeat right bottom;
			}


			

		</style>
	</head>
	<body>

		<div class="top"></div>
		
	</body>
</html>